<template>
  <a-dropdown :trigger="['click']" overlay-class-name="theme-menu">
    <div class="theme-menu-item render-content">
      <div class="title">{{ renderContent.value }}</div>
      <a-icon type="down" />
    </div>
    <a-menu slot="overlay" :selected-keys="selectedKeys" @click="onThemeChange">
      <a-menu-item
        v-for="item in themeList"
        :key="item.value"
        :class="{
          'theme-menu-item': true,
        }"
      >
        <div class="title">{{ item.value }}</div>
        <img :src="item.image" />
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { publicPath } from '@/api/constants'

@Component
export default class GeoMapThemeSelect extends Vue {
  @Prop({ default: 'normal' }) value!: string // 必须，接受form的值

  private themeImagePath = `${publicPath}/img/geo-theme` // 图片路径

  private themeList = [
    {
      value: 'normal',
      image: `${this.themeImagePath}/normal.png`,
    },
    {
      value: 'macaron',
      image: `${this.themeImagePath}/macaron.png`,
    },
    {
      value: 'graffiti',
      image: `${this.themeImagePath}/graffiti.png`,
    },
    {
      value: 'whitesmoke',
      image: `${this.themeImagePath}/whitesmoke.png`,
    },
    {
      value: 'dark',
      image: `${this.themeImagePath}/dark.png`,
    },
    {
      value: 'fresh',
      image: `${this.themeImagePath}/fresh.png`,
    },
    {
      value: 'darkblue',
      image: `${this.themeImagePath}/darkblue.png`,
    },
    {
      value: 'blue',
      image: `${this.themeImagePath}/blue.png`,
    },
    {
      value: 'light',
      image: `${this.themeImagePath}/light.png`,
    },
    {
      value: 'grey',
      image: `${this.themeImagePath}/grey.png`,
    },
  ]

  private get selectedKeys() {
    return [this.value]
  }

  private get renderContent() {
    return this.themeList.filter((item) => item.value === this.value)[0]
  }

  private onThemeChange({ key }: { key: string }) {
    this.$emit('change', key)
  }
}
</script>

<style lang="less" scoped>
.theme-menu-item {
  align-items: center;
  display: flex;

  .title {
    flex: 1;
    margin-right: 10px;
  }

  img {
    height: auto;
    width: 46px;
  }
}

.render-content {
  border: 1px solid #d9d9d9;
  height: 24px;
  line-height: 24px;
  margin-top: 7px;
  padding: 0 8px;
}
</style>
